import React, { Component } from "react"
import { WingBlank, WhiteSpace, NavBar, Button, Icon, Tabs, Badge } from 'antd-mobile'

import CardItems from "../card-items/CardItems"
import { ajax } from "../../api/ajax"


export default class Main extends Component {

    //初始State
    state = {
        open: true,
        "allItems": [],
        "todayItems": [],
        "planItems": [],
    }

    componentDidMount() {
        //加载数据
        this.requestAllItems();
    }

    /**
     * 刷新tab数据
     * @param {*} tab 
     * @param {*} index 
     */
    refresh = (tab, index) => {
        this.requestAllItems();
    }

    requestAllItems = async () => {
        var response = await ajax("/card/get/allCardDetail");
        // console.log("request success, response: ", response);
        var resData = response.data
        if (resData.code === "200") {
            var { allItems, todayItems, planItems } = resData.data;
            this.setState({ ...this.state, allItems, todayItems, planItems })
        }
    }



    onOpenChange = (...args) => {
        // console.log("onOpenChange");
        this.setState({ open: !this.state.open });
    }

    createCard = () => {
        this.props.history.push("/edit")
    }

    toCardDetail = (id) => {
        this.props.history.push("/detail/" + id);
    }


    render() {
        var badgeText = this.state.todayItems.length > 0 ? this.state.todayItems.length : "";
        var tabs = [
            { title: "全部", value: "all" },
            { title: <Badge text={badgeText}>今天</Badge>, value: "today" },
            { title: "计划", value: "plan" },
        ];

        return (
            <div>
                <div className="hearder">
                    <NavBar
                        mode="light"
                        icon={<Icon type="down" />}
                        onLeftClick={this.onOpenChange}
                        rightContent={[
                            <Icon key="0" type="search" style={{ marginRight: '20px' }} />,
                            <Icon key="1" type="ellipsis" />,
                        ]}>卡片</NavBar>
                </div>
                <div className="placeholder"></div>{/**占位符,解决header,footer遮挡*/}
                <div className="body-container" >
                    <WhiteSpace />
                    <WingBlank size="md">
                        <Tabs tabs={tabs} onTabClick={(tab, index) => this.refresh(tab, index)} swipeable={false}>
                            <CardItems items={this.state.allItems} toCardDetail={this.toCardDetail} itemsName="all" refresh={this.refresh} />
                            <CardItems items={this.state.todayItems} toCardDetail={this.toCardDetail} itemsName="today" refresh={this.refresh} />
                            <CardItems items={this.state.planItems} toCardDetail={this.toCardDetail} itemsName="plan" refresh={this.refresh} />
                        </Tabs>
                    </WingBlank>
                    <WhiteSpace />
                </div>
                <div className="placeholder"></div>{/**占位符,解决header,footer遮挡*/}
                <div className="footer">
                    <WingBlank size="md">
                        <Button type="primary" onClick={this.createCard}>添加卡片</Button>
                    </WingBlank>
                </div>
            </div>
        );

    }

}